<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="__STATIC__/css/font.css">
    <link rel="stylesheet" href="__STATIC__/css/xadmin.css">
    <script src="__STATIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC__/js/xadmin.js"></script>
    <style>
        .layui-table-body {
            overflow: -webkit-paged-x;
        }
    </style>
</head>

<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">订单管理</a>
        <a>
            <cite>订单列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form layui-col-space5" style="text-align: center">
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="where"  placeholder="请输入姓名" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block" style="width: 120px;">
                            <select name="test_type">
                                <option value=""></option>
                                <option value="1">在线报名</option>
                                <option value="2">补考缴费</option>
                                <option value="3">预约练车</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="screen">筛选</button>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn"  lay-submit="" lay-filter="reset">重置</button>
                        </div>
                        <div class="layui-inline layui-show-xs-block" style="margin-left: 100px;">
                            <button class="layui-btn layui-btn-normal"  lay-submit="" lay-filter="export">导出</button>
                        </div>
                    </form>
                </div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                </script>
            </div>
        </div>
    </div>
</div>
</body>
<form class="layui-form" id="form2" hidden action='{:url("orderExport")}' method="post">
    <div class="layui-form-item" style="margin-left: 10px;margin-top: 10px;margin-bottom: 10px;">
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" id="start" name="start_time" placeholder="开始时间" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid">-</div>
        <div class="layui-input-inline" style="width: 100px;">
            <input type="text" id="end" name="end_time" placeholder="结束时间" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 25px;">
        <div class="layui-input-block" style="margin-left: 0;width: 200px;">
            <input type="radio" name="status" value="1" title="在线报名">
            <input type="radio" name="status" value="2" title="补考缴费">
            <input type="radio" name="status" value="3" title="预约练车">
            <input type="radio" name="status" value="0" title="全部数据" checked>
        </div>
    </div>
    <div class="layui-form-item" style="margin-left: 25px;">
        <div class="layui-input-block"style="margin-left: 0;font-size: 15px;">
            excel文档
            <input type="submit"  class="layui-btn" style="margin-left: 10px;" value="导出"/>
        </div>
    </div>
</form>
<script>
    layui.use(['table', 'form','laydate'],function() {
        let table = layui.table
            ,laydate = layui.laydate
            ,form = layui.form;
        laydate.render({
            elem: '#start' //指定元素
        });
        laydate.render({
            elem: '#end' //指定元素
        });
        table.render({
            elem: '#test'
            ,url:'{:url("order/orderData")}'
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar: ['filter','print']
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true}
                ,{field:'good_name', title:'商品名称'}
                ,{field:'image', title:'商品图片',templet:function (d) {
                        var image = '<div class="layer-photos-demo">\n' +
                            '<img layer-pid="'+ d.id +'" layer-src="' + d.image + '" src="' + d.image + '" width="30px" height="30px" alt="...">\n' +
                            '</div>';
                        return image;
                    }}
                ,{field:'create_time', title:'下单时间', width:150}
                ,{field:'order_type', title:'订单类型'}
                ,{field:'order_status', title:'订单状态'}
                ,{field:'test_type', title:'报名类型'}
                ,{field:'course_type', title:'科目类型'}
                ,{field:'pay_money', title:'付款金额'}
                ,{field:'true_name', title:'姓名'}
                ,{field:'phone', title:'电话'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page: true
            ,done: function(res, curr, count){
                layer.photos({
                    photos: '.layer-photos-demo'
                    ,anim:5
                });
            }
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){
            let data = obj.data;
            if(obj.event === 'del'){
            } else if(obj.event === 'edit'){
                xadmin.open('订单详情','{:url("orderSee")}?id='+data.id);
            }
        });
        form.on('submit(screen)',function (data) {
            table.reload('test',{
                where:data.field
            });
            return false;
        });
        form.on('submit(reset)',function (data) {
            location.reload();
            return false;
        });
        form.on('submit(export)',function (data) {
            layer.open({
                type: 1,
                title:'导出',
                content:$('#form2'),
                btn:['关闭'],
                yes:function (index, layero) {
                    layer.close(index);
                }
            });
            return false;
        });
    });
</script>

</html>